<template>
<div class="footer">
  <ul>
    <li v-for="item in state.footer_list">
      <a href="#">{{item}}</a>
    </li>
  </ul>
  <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
</div>
</template>

<script>
import {reactive} from "vue"

export default {
  name: "Footer",
  setup(){
    const state = reactive({
      footer_list:["联系我们", "商务合作", "帮助中心", "意见反馈", "新手指南"]
    })

    return {
      state
    }
  }
}
</script>

<style scoped>
.footer {
  width: 100%;
  height: 96px;
  text-align: center;
  background: #25292e;
}

.footer ul {
  width: 80%;

  margin: 0 auto;
  padding-top: 20px;
  display: flex;
}

.footer ul li {
  flex: 1;
}

.footer ul li a {
  display: inline-block;
  color: #fff;
  font-size: 14px;
}

.footer ul li a:hover {
  color: gray;
  font-size: 16px;
}

.footer p {
  margin-top: 20px;
  color: #fff;
}
</style>